<template>
    <div :class="isUnartifical ? 'tag tagheight':'tag' ">
        <el-tag
            :key="tag"
            v-for="tag in tagdata.dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
            </el-tag>
            <el-input
            class="input-new-tag"
            v-if="tagdata.inputVisible"
            v-model="tagdata.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
        >
</el-input>
    <el-button v-else-if="!isUnartifical" class="button-new-tag" size="small" @click="showInput">+ 添加同义词</el-button>
    </div>
</template>
<script>
// import { savePets, getPets } from './../api/task'; //引入api 的接口
export default{
    
    data(){
        return{
        id:null,
        tagdata:{
            tags:[],
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
        },
       
        }
    },
    props: {
       mainId: { type: String },
       isUnartifical: { type: Boolean, default: false }
  },
    methods:{
        getPet(){
            console.log(this.mainId);
             this.id = this.mainId;
            getPets(this.id).then(res => {
                console.log(res);
                this.tagdata.tags = res.data;
            });

        },
    handleClose(tag) {
        this.tagdata.dynamicTags.splice(this.tagdata.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.tagdata.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.tagdata.inputValue;
        if (inputValue) {
          this.tagdata.dynamicTags.push(inputValue);
        }
        this.tagdata.inputVisible = false;
        this.tagdata.inputValue = '';
      },
    },
    created(){
      //  this.getPet();
    }
   
}
</script>
<style lang="scss" scoped>
// @import './../assetss/reset.css';
.tagheight{
  height: 400px;
}
.tag{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // align-items: center;
  span{
    // width: 33.3%;
    padding: 0 20px;
    height: 40px;
    border-radius: 0;
    background: #fff;
    border-color: #ccc;
    font-size: 16px;
    color: #000;
    line-height: 40px;
    text-align: center;
  }
  button{
    //  width: 33.3%;
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    background: #fff;
    border-color: #ccc;
    font-size: 16px;
    color: #000;
    line-height: 40px;
    text-align: center;
    // padding: 0;
  }
  div{
    width: 50%;
    height: 40px;
    font-size: 16px;
    color: #000;
     line-height: 40px;
    text-align: center;
    border-radius: 0;
  }
  
}
</style>
